<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>{{channel.name}}</span>
      <i class="el-icon-d-arrow-right"></i>
    </div>
    <ul class="list-content-block">
      <li :key="item.id" v-for="(item,index) in dataList">
        <!--咨询标题（超链接）-->
        <router-link :to="`/front/newDetail/${item.id}`" target="_blank">
          <i class="el-icon-info"></i>   <span>{{item.title}}</span>
        </router-link>
        <span class="after" ><i class="el-icon-alarm-clock"></i>{{item.created | showDate}}</span>
        <!--咨询标题（超链接）-->
      </li>
    </ul>
  </el-card>
</template>

<script>

  import {formatDate} from "@/utils/date";
  import {selectChannel} from '@/api/channel';
  import {findListByChannelId} from '@/api/article';

    export default {
      name: "RCard",
      props:['channelId'],
      data() {
        return {
          pagination: {//分页数据模型数
            currentPage: 1,//当前页码
            pageSize: 10,//每页显示的记录数
            total: 0,//总记录数
            queryParams: {
              "channelId":1,
              "queryString":""
            }//查询条件
          },
          channel:{},//栏目咨询分类
          dataList:[] //栏目咨询列表
        }

      },
      mounted() {
          this.findChannelById(this.channelId);
          this.findListByChannelId(this.channelId);
        },
      methods:{
          //根据ID获取栏目分类信息
          findChannelById(id){
            selectChannel(id).then(res=>{this.channel = res.data})
          },
          //根据栏目ID获取文章列表
        findListByChannelId(id){
           // this.pagination.queryParams.channelId = this.channelId
          findListByChannelId(id).then(res=>{
            console.log(res.data)
              this.dataList = res.data.articleList;
            })

          },
        },
      filters: {
        showDate(value) {
          // 1.将时间戳转为Date对象
          const date = new Date(value);
          // 2.将date进行格式化
          return formatDate(date, "yyyy-MM-dd");
        }
      }

    }
</script>

<style scoped>

</style>
